<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="format-detection" content="telephone=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <link href="css/SYSFrame.css" rel="stylesheet" type="text/css" />
    <link href="font/iconfont.css" rel="stylesheet" type="text/css" />
    <link href="css/module.css" rel="stylesheet" type="text/css" />
    <link href="css/pages.css" rel="stylesheet" type="text/css" />
    <title>会员信息</title>
    <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="js/jquery.nicescroll.js" type="text/javascript"></script>
    <script src="js/HUpages.js" type="text/javascript"></script>
    <script src="js/template.js" type="text/javascript"></script>
    <!--[if lt IE 9]>
    <script src="js/html5shiv.js" type="text/javascript"></script>
    <script src="js/css3-mediaqueries.js"  type="text/javascript"></script>
    <![endif]-->
</head>

<body id="pagestyle">
<!--左侧菜单栏-->
<div class="bk-con-menu " id="bk-con-menu">
    <div class="menubtn">
        <span class="close_btn samebtn"><i>隐藏</i></span>
        <span class="show_btn samebtn"><i>显示</i></span>
    </div>
    <div class="title-menu">等级分类</div>
    <div class="breadcrumb" id="breadcrumb">
        <ul class="clearfix gradeList menulist" id="gradeList">

        </ul>
    </div>
</div>
<!--右侧内容-->
<div class="bk-con-message message-section" id="iframe_box">
    <div class="page_content clearfix padding15" id="memberList">
    </div>
</div>
</body>

</html>
<script id="gradehtml" type="text/html">
    <li class="sortstyle relative " onclick="gradelink(this,0)" ischek="true">
        <a href="javascript:void(0)" class="block sortname clickBombbox selected">全部</a>
    </li>
    <% for(var i = 0; i < grade.length; i++) { %>
    <li onclick="gradelink(this,<%=grade[i].id%>)" class="sortstyle relative" data-id="<%=grade[i].id%>" ischek="false">
        <a href="javascript:void(0)" class="block sortname clickBombbox">
            <%=grade[i].name%> (
            <%=grade[i].quantity %> )</a>
    </li>
    <% } %>
</script>
<script>
    $(function() {
        //内页框架结构编辑
        $("#pagestyle").Hupage({
            slide: '#breadcrumb',
            padding: 15,
            clickBombbox:'.menulist',
            menuModule: '#bk-con-menu', //菜单模块
            pagecontent: '.page_content', //自定义属性
            operation: '.operation', //自定义属性
            scrollbar: function(e) {
                e.niceScroll({
                    cursorcolor: "#dddddd",
                    cursoropacitymax: 1,
                    touchbehavior: false,
                    cursorwidth: "3px",
                    cursorborder: "0",
                    cursorborderradius: "3px",
                });
            },
            expand: function(thisBox, settings) {
                var pc = "";
                $(settings.pagecontent).css("margin-bottom") != null ? pc = parseInt($(settings.pagecontent).css("margin-bottom").replace("px", "")) : '';
                $(settings.pagecontent).css({
                    height: $(window).height() - $(settings.operation).outerHeight() - pc - (settings.padding * 2)
                })
                settings.scrollbar($(settings.slide) && $(settings.pagecontent));
            } //自定义方法
        });
    });
    //等级列表数据
    var memberdata = function(callback) {
        $.ajax({
            url: "json/member.json",
            type: "GET",
            dataType: 'json',
            success: function(ret) {
                typeof callback == 'function' && callback(ret);
            },
        });
    };
    memberdata(function(dataArr) {
        var gradehtml = $('#gradeList');
        var html = template('gradehtml', {
            grade: dataArr.grade
        });
        gradehtml.html(html);
        $("#gradehtml").remove();
        var data = null;
        var id = 0;
        memberList(dataArr, data, id)
    });
    //会员显示列表
    function memberList(dataArr, data, id) {
        if(data == null) {
            var data = dataArr.data;
        }
        $.ajax({
            url: "html/member/index.html",
            type: "GET",
            dataType: "html",
            success: function(result) {
                $('body').append("<script id='memberhtml' type='text/html'>" + result + "</script\>");
                var memberlist = $('#memberList');
                var html = template('memberhtml', {
                    id: id,
                    list: data,
                    grade: dataArr.grade
                });
                memberlist.html('');
                memberlist.html(html);
                new TableSorter("tableList", 1, 2, 8); //设置
                $("#memberhtml").remove(); //加载完毕删除模版路径
                $("#quantity").html(data.length);//数据数量

            }
        });
    }
    //筛选分类用户信息数据
    function gradelink(obj, id) {
        var listdata = function(callback) {
            $.ajax({
                url: "json/member.json",
                type: "GET",
                dataType: 'json',
                success: function(ret) {
                    typeof callback == 'function' && callback(ret);
                },
            });
        };
        listdata(function(dataArr) {
            if(id == 0) {
                var data = null;
            } else {
                var data = dataArr.data.filter(function(e) {
                    return e.grade == id;
                });
            }
            memberList(dataArr, data, id);
        });
    }
    //查看用户信息
    function memberinfo(obj, id) {
        var content = function(callback) {
            $.ajax({
                url: "json/member.json",
                type: "GET",
                dataType: 'json',
                success: function(ret) {
                    typeof callback == 'function' && callback(ret);
                },
            });
        };
        content(function(dataArr) {
            var data = dataArr.data.filter(function(e) {
                return e.id == id;
            });
            $.ajax({
                url: "html/member/content.html",
                type: "GET",
                dataType: "html",
                success: function(result) {
                    $('body').append("<script id='contenthtml' type='text/html'>" + result + "</script\>");
                    var contentname = $('#memberList');
                    var html = template('contenthtml', {
                        id:id,
                        info: data,
                        grades: dataArr.grade
                    });
                    contentname.html('');
                    contentname.html(html);
                    $("#contenthtml").remove(); //加载完毕删除模版路径
                    var radios = document.getElementsByName("statusradio");
                    for(var i = 0; i < radios.length; i++) {
                        var radioid = radios[i].dataset.id;
                        radios[0].checked = true;
                        if(data[0].status == radioid) {
                            radios[i].checked = true;
                        } else {
                            radios[i].checked = false;
                        }
                    };
                    var sexradios=document.getElementsByName("sexradio");
                    for(var s = 0; s < sexradios.length; s++) {
                        var sexid = sexradios[s].dataset.id;
                        sexradios[0].checked = true;
                        if(data[0].sex == sexid) {
                            sexradios[s].checked = true;
                            return;
                        } else {
                            sexradios[s].checked = false;
                        }
                    };
                }
            });
        });
    };
</script>
<script type="text/javascript" src="js/common.js"></script>
